
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { Common } from "UtilsCommon";
import { useGetDataSourceOptions } from 'UseHooks';
import { Checkbox } from "antd";
import Base from './base';
import styles from '../styles/view.scss';

const getOptions = (property, view, pageAxis, parentValue) => {
  Base.setValueTextName(property);

  const { dataSource, valueName, textName } = property;

  const options = [];

  Common.isArray(dataSource) && dataSource.forEach(d => {
    if (Base.judgePush(d, parentValue, property, view)) {
      options.push({ value: d[valueName], label: d[textName] });
    }
  });

  return options;
};

const checkBoxChange = (property, value, setValue) => {
  if (property.isSingleSelection && value && value.length > 1) value = [value[value.length - 1]];

  setValue(value);
  Base.bindDataValue(property, value);
};

const valueChange = (property, value) => {
  if (property.valueChange) property.valueChange(value, Base.getSelectDataList(property, value));
};

export default (props) => {
  const { property, view, pageAxis } = Base.getProps(props);

  const obj = useMemo(() => ({}), []);
  const [value, setValue] = useState(Base.getInitValue(property, obj));
  const [isVisible, setIsVisible] = useState(property.isVisible !== false);
  const [isReadOnly, setIsReadOnly] = useState(!!property.isReadOnly);
  const [disabled, setDisabled] = useState(!!property.disabled);

  const [options, setOptions] = useGetDataSourceOptions(property, view, pageAxis, getOptions);

  const onChange = useCallback((v) => {
    property.isChanged = true;
    checkBoxChange(property, v, setValue);
  }, [property, setValue]);

  useEffect(() => {
    valueChange(property, value);
  }, [property, options, value]);

  property.setIsVisible = (v) => setIsVisible(v);
  property.setValue = (v) => setValue(v);
  property.getValue = () => Base.getValue(property, value);
  property.setDisabled = (v) => setDisabled(v);
  property.setIsReadOnly = (v) => setIsReadOnly(v);
  property.setParentValue = (v) => setOptions(getOptions(property, view, pageAxis, v));
  property.refreshOptions = () => setOptions(getOptions(property, view, pageAxis));

  if (!isVisible) return null;

  let valueList = Common.isNullOrEmpty(value) ? [] : value;
  if (!Common.isArray(valueList)) valueList = valueList.split(",");

  if (options.length === 0 && property.placeHolder) {
    return <div style={property.placeHolderStyle}>{property.placeHolder}</div>;
  }

  let style;
  if (property.isFlexColumn) {
    style = {
      display: "flex",
      flexDirection: "column",
      lineHeight: "32px"
    };
  }

  if (property.isNumber) valueList = valueList.map(m => Common.getNumber(m));

  const className = Base.getClassName(property, styles);

  if (isReadOnly) {
    const options2 = options.filter(f => valueList.includes(f));

    return <Checkbox.Group value={valueList}
      style={style} className={className}
      options={options2}></Checkbox.Group>;
  }
  else {
    return <Checkbox.Group value={valueList}
      style={style}
      disabled={disabled} className={className}
      onChange={onChange} options={options}></Checkbox.Group>;
  }
};